@import "../../../assets/commonCss/style.styl"
#PublishNotice {
  width : 100%;
  position : absolute;
  top : 0;
  bottom : 0;
  height : 100%;
  background-color : #666;
  ::-webkit-scrollbar {
    display : none;
  }

  header {
    position : absolute;
    display : flex;
    justify-content : space-between;
    background-color : #ccc;
    top : 0;
    width : 100%;
    z-index : 1;

    > ul {
      height : 50px;
      line-height : 50px;
      padding : 0px 40px 0px 50px;

      > li {
        float : left;
        margin-right : 10px;
        font-size : 19px;

        :first-child {
          color : #fff;
        }
      }
    }
  }

  .publishPage {
    position : absolute;
    top : 50px;
    bottom : 0;
    width : 100%;
    height : calc(100% -50px);
    background-color : #fff;

    .contentAside {
      position : relative;
      height : 100%;
      float : left;
      background-color : #fff;
      border-right: 1px solid #ccc;

      > aside {
        position : relative;
        top 50px
        width : 239px;

        .fold {
          width : 100%;
          height : 109px;
          font-size : 20px;
        // border: 1px solid #000;
          line-height : 109px;
          text-align : center;
          color : #9399B0;
        }

        .readNotice, .meetingNotice {
          position : relative;
          left : 40px;
          width : 160px;
          height : 40px;
          line-height : 40px;
          margin-top : 10px;
          text-align : center;
          background-color : #4A96FF;
          ont-family : 'PingFangSC-Regular';
          font-size : 16px;
          color : #FFFFFF;
          letter-spacing : -0.39px;
          cursor : pointer;
        }

        .draft, .recycle {
          > span {
            display : inline-block;
            width : 100%;
            height : 70px;
            line-height : 70px;
            padding-left : 20px;
            font-family : 'PingFangSC-Regular';
            font-size : 14px;
            color : #4c4c4c;
            letter-spacing : -0.39px;
          }

          .temp {
            position : relative;
            height : 80px;
            padding : 10px 40px;
            background-color : #d8d8d8;
            font-weight : bold;
            border-left : 8px solid #4A96FF;
            background-color : #fff;
            color : #000;

            > p {
              position : relative;
              top : 10px;
              height : 20px;
              line-height : 20px;
              font-family : 'PingFangSC-Regular';
              font-size : 14px;
              color : #9399B0;
              letter-spacing : -0.39px;
            }

            > span {
              position : absolute;
              bottom : 10px;
              font-family : 'PingFangSC-Medium';
              font-size : 10px;
              color : #9399B0;
              letter-spacing : -0.34px;

              > icon {
                color : #a5a5a5;
              }
            }
          }

          > ul {
            width : 100%;

            > li {
              height : 80px;
              padding : 10px 40px;
              background-color : #e5e5e5;
              cursor : pointer;
              margin-bottom: 1px;

              > p {
                display : block;
                width : 160px;
                height : 30px;
                line-height : 30px;
                font-family : 'PingFangSC-Regular';
                font-size : 14px;
                color : #4c4c4c;
                letter-spacing : -0.39px;
                overflow : hidden;
                text-overflow : ellipsis;
                white-space : nowrap;
              }

              > span {
                height 30px
                line-height 30px
                font-family : 'PingFangSC-Medium';
                font-size : 10px;
                color : #4c4c4c;
                letter-spacing : -0.34px;

                > icon {
                  color : #4c4c4c;
                }
              }
            }


            :hover {
              background-color : #7f7f7f;
              > p {
                color:#fff;
              }
              > span {
                color:#fff;
              }
            }

            .checkedActive {
              box-sizing : border-box;
              padding : 10px 40px 10px 32px;
              border-left : 8px solid #4A96FF;
              background-color : #7f7f7f;
              > p {
                color:#fff;
              }
              > span {
                color:#fff;
              }
            }
          }
        }

        .recycle {
          margin-bottom : 150px;
        }
      }
    }

    > article {
      position : relative;
      float : left;
      height : 100%;
      width : -moz-calc(100% - 240px);
      width : -webkit-calc(100% - 240px);
      width : calc(100% - 240px);

      .contentInfo {
        position : relative;
        height : calc(100% - 40px);

        > ul {
          padding-left : 60px;
          width : 600px;
          padding-bottom : 50px;

          > li {
            width : 100%;
            position : relative;
            padding: 10px;
            margin: 10px 0px 10px 0px;
            background-color: #e5e5e5;
          }

          .titleList {
            > p {
              margin : 20px 0 10px 0;
              height : 20px;
              font-family : 'PingFangSC-Regular';
              font-size : 14px;
              color : #999999;
              letter-spacing : -0.47px;
            }

            > .titleContent {
              width : 100%;
              height : 60px;
              padding : 20px 40px;
              background-color : #fff;
              border : 0px solid #000;
            }

            :focus {
              border : 1px solid #ccc;
            }
          }

          .contentList {
            > p {
              margin : 20px 0 10px 0;
              height : 20px;
              font-family : 'PingFangSC-Regular';
              font-size : 14px;
              color : #999999;
              letter-spacing : -0.47px;
            }

          // #publishContentInfo {
          // width: 520px;
          // min-height: 100px;
          // border: 0 solid #000;
          // }

          // :focus {
          // border: 1px solid #ccc;
          // }
            .notifType {
              padding : 20px
              background-color : #fff
              overflow : hidden
              .notifType-sel {
                width : 50%
                padding : 20px
                float : left
                cursor : pointer
                transition all .25s
                &:hover {
                  background-color : rgba(204, 204, 204, .2)
                }
                .notifType-title {
                  margin-bottom : 10px
                  color : #8700e0
                }
              }
            }

            > .notificationContent {
              width : 100%;
              padding : 20px 40px;
              background-color : #fff;

              > p {
                margin-bottom : 20px;
                font-family : PingFangSC-Regular;
                font-size : 14px;
                color : #999999;
                letter-spacing : -0.3px;

                > span {
                  font-family : PingFangSC-Regular;
                  font-size : 14px;
                  color : #4A96FF;
                  letter-spacing : -0.3px;
                  line-height : 20px;
                }
              }

              > div {
                position : relative
                margin-bottom : 10px
                overflow : hidden;
                > textarea {
                  float : left;
                  width : 100%;
                  line-height : 20px;
                  height : 120px;
                  font-size : 14px;
                  color : #000;
                  border : 0px solid #000;
                  resize : none;
                }

                :focus {
                  border : 1px solid #ccc;
                }

                > s {
                  float : right;
                  width : 20%;
                  line-height : 120px;
                  text-align : center;
                  color : skyblue;
                }
              }
              .markdownCon {
                display : block
                min-height : 100px
                padding : 10px;
                transition all .25s
                cursor : pointer
                &:hover {
                  background-color : rgba(204, 204, 204, .2)
                }
                + .mark {
                  position : absolute;
                  right : 0;
                  top : 50%;
                  transform : translateY(-50%);
                }
              }
            }
          }

          .sessionList {
            position : relative;

            > p {
              margin : 20px 0 10px 0;
              height : 20px;
              font-family : 'PingFangSC-Regular';
              font-size : 14px;
              color : #999999;
              letter-spacing : -0.47px;
            }

            > .groupInfo {
              width : 100%;
              padding : 30px 40px;
              background-color : #fff;

              > .companyName {
                position : relative;
                top : -5px;
                left : 0;
              }

              > .companyList {
                display : -webkit-box;
                -webkit-box-orient : vertical;
                -webkit-line-clamp : 4;
                overflow : hidden;

                > .allCompanyList {
                  position : absolute;
                  bottom : 5px;
                  left : 40px;
                }
              }

              > .subheadList {
                width : 100%;
                overflow : hidden;
                padding-bottom : 20px;

                > .subheadListInfo {
                  float : left;
                  height : 30px;
                  line-height : 30px;
                  padding : 0 12px;
                  margin : 0 10px 10px 0;
                  background : #F1F4F8;
                  border : 1px solid #D5DCE6;
                  border-radius : 3px;
                }
              }

              > .groupList {
                padding : 0px 50px;
                display : flex;
                justify-content : space-around;
              }

              > .allGroupList {
                position : relative;
                margin : 10px 0 20px 0;
                left : 50%;
                transform : translate(-50%);
                display : inline-block;
                width : 120px;
                height : 30px;
                line-height : 30px;
                text-align : center;
                background : #F1F4F8;
                border : 1px solid #D5DCE6;
                border-radius : 3px;
              }

              > .groupListInfo {
                width : 100%;
                background-color : #fff;

                > .subheadList {
                  width : 100%;
                  overflow : hidden;
                  padding-bottom : 20px;

                  > .subheadListInfo {
                    float : left;
                    height : 30px;
                    line-height : 30px;
                    padding : 0 12px;
                    margin : 0 10px 10px 0;
                    background : #F1F4F8;
                    border : 1px solid #D5DCE6;
                    border-radius : 3px;
                  }
                }
              }

              > .allGroupListInfo {
                position : relative;
                margin : 10px 0 20px 0;
                left : 50%;
                transform : translate(-50%);
                display : block;
                width : 120px;
                height : 30px;
                line-height : 30px;
                text-align : center;
                background : #F1F4F8;
                border : 1px solid #D5DCE6;
                border-radius : 3px;
              }

              > .groupListInfoBtn01 {
                display : inline-block;
                color : #333;
                font-size : 14px;
              }

              > .groupListInfoBtn01:hover {
                color : #FB607F;
              }
            }

            > .subheadListBtn {
              position : absolute;
              left : 30px;
              bottom : 20px;

              > a {
                display : inline-block;
                margin : 20px 20px 0px 0;
                color : #333;
                font-size : 14px;
              }

              > .subheadListBtn01:hover {
                color : #FB607F;
              }

              > .subheadListBtn02:hover {
                color : #4A96FF;
              }
            }
          }

          .deadlineList {
            > p {
              margin : 20px 0 10px 0;
              height : 20px;
              font-family : 'PingFangSC-Regular';
              font-size : 14px;
              color : #999999;
              letter-spacing : -0.47px;
            }

            > .respondDeadline {
              width : 100%;
              height : 100px;
              line-height : 60px;
              padding : 20px;
              background-color : #fff;

              > input {
                width : 80px;
                height : 40px;
                text-align : center;
              }

              > .deadlineTimeList {
                > li {
                  position : relative;
                  top : 10px;
                  float : left;
                  margin-right : 10px;
                  font-family : PingFangSC-Regular;
                  font-size : 18px;
                  color : #333333;
                  letter-spacing : -0.45px;
                }

                .time01, .time02, .time03, .time05 {
                  top : 13px;
                  width : 100px;
                  height : 50px;
                  line-height : 50px;
                  text-align : center;
                  background : #F0F1F2;
                  border : 1px solid #E5E9EA;
                  font-family : 'DINCondensed-Bold';
                  font-size : 36px;
                  color : #333333;
                  letter-spacing : -0.45px;
                }

                .time02 {
                  width : 50px;
                }

                .time03 {
                  width : 50px;

                  > span {
                    position : absolute;
                    top : -22px;
                    left : -1px;
                    font-size : 12px;
                    font-weight : normal;
                    width : 50px;
                    height : 20px;
                    line-height : 20px;
                    background-color : #eee;
                    color : #666;
                  }
                }

                .time04 {
                  color : #4bacc6;
                  margin-left : 10px;
                  font-weight : bold;
                }

                .time05 {
                  width : 50px;
                  color : #4bacc6;
                  margin-left : 10px;
                }
              }

              > .meetingTime {
                > li {
                  position : relative;
                  top : 10px;
                  float : left;
                  margin-right : 10px;
                  font-family : PingFangSC-Regular;
                  font-size : 18px;
                  color : #333333;
                  letter-spacing : -0.45px;
                }

                .time01, .time02, .time03, .time05 {
                  top : 13px;
                  width : 100px;
                  height : 50px;
                  line-height : 50px;
                  text-align : center;
                  background : #F0F1F2;
                  border : 1px solid #E5E9EA;
                  font-family : 'DINCondensed-Bold';
                  font-size : 36px;
                  color : #333333;
                  letter-spacing : -0.45px;
                }

                .time02 {
                  width : 50px;
                }

                .time03 {
                  width : 50px;

                  > span {
                    position : absolute;
                    top : -22px;
                    left : -1px;
                    font-size : 12px;
                    font-weight : normal;
                    width : 50px;
                    height : 20px;
                    line-height : 20px;
                    background-color : #eee;
                    color : #666;
                  }
                }

                .time04 {
                  color : #4bacc6;
                  margin-left : 10px;
                  font-weight : bold;
                }

                .time05 {
                  width : 50px;
                  color : #4bacc6;
                  margin-left : 10px;
                }
              }

              .deadlineTimeListEdit {
                position : relative;
                top : 0;
                left : 0;
              }
            }
          }

          .meetStartTimeStyle {
            > p {
              margin : 20px 0 10px 0;
              height : 20px;
              font-family : 'PingFangSC-Regular';
              font-size : 14px;
              color : #999999;
              letter-spacing : -0.47px;
            }

            > .respondDeadline {
              width : 100%;
              height : 100px;
              line-height : 50px;
              padding : 25px;
              background-color : #fff;

              .deadlineTimeList {
                > li {
                  float : left;
                  margin-left : 10px;
                  font-family : PingFangSC-Regular;
                  font-size : 18px;
                  color : #333333;
                  letter-spacing : -0.45px;
                }

                .time04 {
                  width : 50px;
                  height : 50px;
                  line-height : 50px;
                  text-align : center;
                  color : #4bacc6;
                  background-color : #eee;
                // margin-left: 10px;
                  font-weight : bold;
                }
              }
            }
          }

          .ivu-modal-content {
            position : relative;
            width : 800px;
            left : 50%;
            transform : translate(-50%);
          }

          .ivu-select-multiple .ivu-select-selection {
            width : 770px;
          }
        }
      }

      /* Standard */
      .noticeTemplate {
        position : absolute;
        top : 0;
        left : 300px;
        margin-left : -300px;
      }

      .tabBarBottom {
        position : absolute;
        bottom : 0;
        padding : 0px 0px;
        width : 100%;
        height : 40px;
        background-color : #202433;

        > ul {
          width 100%
          height 40px
        // display: flex;
        // border: 1px solid #000;
          > li {
            float : left;
          }

          .tabBar-01 {
            width : 160px;
            height : 40px;
            line-height : 40px;
            font-size : 16px;
            background-color : #FB607F;
            text-align : center;
            color : #fff;
          // border: 1px solid #000;
            cursor : pointer;
          }

          .tabBar-03 {
            float : left;
            margin-left : -moz-calc(100% - 480px);
            margin-left : -webkit-calc(100% - 480px);
            margin-left : calc(100% - 480px);
            width : 160px;
            height : 40px;
            line-height : 40px;
            font-size : 16px;
            background-color : #3b3f4e;
            text-align : center;
            color : #fff;
          // border: 1px solid #000;
            cursor : pointer;
          }

          .tabBar-04 {
            float : left;
            width : 160px;
            height : 40px;
            line-height : 40px;
            font-size : 16px;
            background-color : #4A96FF;
            text-align : center;
            color : #fff;
          // border: 1px solid #000;
            cursor : pointer;
          }

          .tabBar-05 {
            float : left;
            width : 160px;
            height : 40px;
            line-height : 40px;
            font-size : 16px;
            background-color : #FB607F;
            text-align : center;
            color : #fff;
          // border: 1px solid #000;
            cursor : pointer;
            margin-right : 1px;
          }

          .tabBar-06 {
            float : left;
            width : 160px;
            height : 40px;
            line-height : 40px;
            font-size : 16px;
            background-color : #3b3f4e;
            text-align : center;
            color : #fff;
          // border: 1px solid #000;
            cursor : pointer;
          }
        }
      }
    }
  }

  .editor-layer {
    position fixed
    top : 0
    bottom : 0
    right : 0
    left : 0
    background-color : rgba(0, 0, 0, .5)
    z-index : 900
    .editor {
      position : relative
      width : 50%
      min-width : 600px
      height : calc(100% - 40px);
      margin : 20px auto;

      .btn-editor {
        position : absolute
        right : -60px
        top : 0
        width : 60px
        text-align : center
        .close-editor {
          font-size : 40px
          cursor : pointer
        }
      }
    }
  }

  #quillEditor {
    height : 100%
    background-color : #fff
    border-radius(4px)
    .ql-container {
      height : calc(100% - 42px)
    }
    .ql-snow .ql-picker.ql-header {
      width : 45px
    }
  }
}




